<template>
  <main>
    <div id="app" style="padding-top: 300px">
      <el-card id = "login-card" class="box-card">
        <h2 style="border-bottom: 1px solid black; text-align: center">  网盘管理系统  </h2>
        <el-form :model="account" status-icon :rules="rules" ref="account" label-width="100px" class="demo-ruleForm" style="width: 400px;margin-top: 15px">
          <el-form-item label="用户名" prop="userName">
            <el-input type="text" v-model="account.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input type="passWord" v-model="account.passWord" autocomplete="off"></el-input>
          </el-form-item>
          <el-checkbox v-model="account.autoLogin">自动登录</el-checkbox>
          <el-form-item>
            <el-button style="width: 40%;margin-left: 10px" type="primary" @click="register()">注册</el-button>
            <el-button style="width: 40%;margin-left: 10px" type="primary" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 注册对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" prop="passWord">
            <el-input v-model="form.passWord" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="确定密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" placeholder="请再次输入密码" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit()">确 定</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </main>
</template>
<script>
import axios from "axios";

export default {
    created() {
      if(this.$cookies.get("token")!=null){
        /*通过token请求*/
        axios.get("api/account/login").then((res)=>{
          if(res!=null){
            if(res.data.responseCode === 200){
              this.$notify({
                title: '自动登录成功',
                message: '已自动登陆到服务器',
                duration: 3000,
                type: 'success'
              });
              this.$router.push({path:'/system'})
            }
          }
        })/*.catch(()=>{
        this.$notify({
          title: '自动登录失败',
          message: '保存信息已失效，请重新登录',
          duration: 3000,
          type: 'warning'
        });*/
      }
    },
    mounted(){
      if(this.$route.query.login!=null){
        this.$notify({
          title: '尚未登陆！',
          message: '您好，您尚未登陆，请先登录到网盘进行使用',
          duration: 3000,
          type: 'warning'
        });
      }
    },
    data() {
      var confirmPasswordCheck = (rule, value, callback) => {
        if(this.form.passWord != this.form.confirmPassword){
          callback(new Error('两次输入的密码不一致'))
        }else {
          callback()
        }
      }
      return {
        account: {
          userName: '',
          passWord: '',
          autoLogin: true
        },
        rules:{
          userName: [
            { required: true, trigger: 'blur', message: '请输入用户名'  },
            {
              required: true,
              pattern: /^[1-9]{1}[0-9]{4,9}$/,
              message: '用户账户首位应为1~9的数字！长度在 4 到 10 位',
              trigger: 'blur'
            }
          ],
          passWord: [
            { required: true, trigger: 'blur', message: '请输入密码' },
            {
              required: true,
              pattern: /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/,
              message: '需首位包含字母，长度在 8 到 15 位！',
              trigger: 'blur'
            }
          ],
        },
        /*表单参数*/
        form:{
          userName: '',
          passWord: '',
          confirmPassword: ''
        },
        formRules:{
          userName: [
            { required: true, trigger: 'blur' , message: '请输入用户名'},
            {
              required: true,
              pattern: /^[1-9]{1}[0-9]{4,9}$/,
              message: '用户账户首位应为1~9的数字，只允许纯数字用户名！长度在 4 到 10 位',
              trigger: 'blur'
            }
          ],
          passWord: [
            { required: true, trigger: 'blur' , message: '请输入密码'},
            {
              required: true,
              pattern: /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/,
              message: '需首位包含字母，长度在 8 到 15 位！',
              trigger: 'blur'
            }
          ],
          confirmPassword: [
            { required: true, validator: confirmPasswordCheck, trigger: 'blur' },
          ],
        },
        /*dialog 隐形参数*/
        open: false,
        /*dialog title*/
        title: '注册账户'
      }
    },
  methods:{
    login : function(){
      this.$refs.account.validate((valid) => {
        if (valid) {
          // 向后台发送请求
          axios.post("api/account/login",this.account).then((res)=>{
            if(res!=null){
              if(res.data.responseCode === 200){
                this.$notify({
                  title: '登录成功',
                  message: '已登陆到服务器，欢迎您，'+this.account.userName,
                  duration: 3000,
                  type: 'success'
                });
                this.$router.replace({path:'/system'})
              }else {
                this.$notify({
                  title: '登录失败',
                  message: res.data.message,
                  duration: 3000,
                  type: 'error'
                });
              }
            }
          }).catch((error)=>{
            console.log(error)
            this.$notify({
              title: '登录失败',
              message: '服务器错误',
              duration: 3000,
              type: 'error'
            });
          });
        } else {
          //向用户提示发生错误的消息
        }
      });
    },
    register: function (){
      this.open = true;
      this.resetForm();
    },
    resetForm: function (){
      this.form.confirmPassword = null;
      this.form.userName = null;
      this.form.passWord = null;
    },
    submit: function (){
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          axios.post("api/account/register", this.form).then((res) => {
            if (res != null) {
              if (res.data.responseCode === 200) {
                this.$notify({
                  title: '注册成功',
                  message: '已注册新账户到服务器！',
                  duration: 3000,
                  type: 'success'
                });
                this.open = false;
              } else {
                this.$notify({
                  title: '注册失败',
                  message: res.data.message,
                  duration: 3000,
                  type: 'error'
                });
              }
            }
          }).catch((error) => {
            console.log(error)
            this.$notify({
              title: '注册失败',
              message: '服务器错误',
              duration: 3000,
              type: 'error'
            });
          });
        }
      });
    },
    cancel: function (){
      this.open = false;
    }
  },
}
</script>
<style>
body{
  width: 100%;
  background-image: url(../assets/img/login-bg.jpg);
  background-repeat: no-repeat;
}
.box-card {
  width: 480px;
}
#login-card{
  margin: 0 auto;
}
</style>